<template>
  <div ref="echartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必要的组件
echarts.use([TooltipComponent, LegendComponent, TitleComponent, RadarChart, CanvasRenderer])
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
// console.log('战区落实率', props.data)
const echartRef = ref(null)
let mChart = null

onMounted(() => {
  mChart = echarts.init(echartRef.value)
  renderChart()
})
const renderChart = () => {
  const tooltipData = props.data.map((item) => {
    return {
      name: item.name,
      rate: item.rate + '%',
      rank: `第${item.rank}名`,
      ringRatio: item.tend,
    }
  })
  const barData = props.data.map((item) => item.rate)
  // const max = Math.max(...barData)
  let bgData = new Array(barData.length).fill(100)
  const data = {
    categories: props.data.map((item) => item.name),
    barData: props.data.map((item) => item.rate), // 落实率
    lineData: props.data.map((item) => item.tend), // 环比，这里简化为100
    tooltipData: tooltipData,
  }
  const option = {
    backgroundColor: '#2a2a2a', // 暗色主题背景
    grid: {
      left: '5%',
      right: '1%',
      // bottom: '5%',
      // top: '5%',
      // containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      backgroundColor: 'rgba(44, 23, 14, 0.80)',
      borderColor: 'rgba(44, 23, 14, 0.80)',
      textStyle: {
        color: '#fff', // 设置 tooltip 文字颜色
      },
      formatter: function (params) {
        const category = params[0].name
        const tooltipData = data.tooltipData.find((item) => item.name === category)
        return `
        <div>
          <p><strong>${tooltipData.name}</strong></p>
          <p>落实率：${tooltipData.rate}</p>
          <p>战区排名：${tooltipData.rank}</p>
          <p>环比：${tooltipData.ringRatio}</p>
        </div>
      `
      },
    },
    legend: {
      data: ['落实率', '环比'],
      right: '10',
      top: '10',
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      data: data.categories,
      axisLabel: {
        color: 'rgba(250, 191, 188, 1)',
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 106, 58, .5)',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: {
          type: 'dashed', // 设置分割线为虚线
          color: 'rgba(255, 106, 58, .15)',
        },
      },
    },
    series: [
      {
        name: '落实率',
        type: 'bar',
        data: data.barData,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(237, 100, 76, 1)' },
            { offset: 1, color: 'rgba(107, 31, 31, 0.20)' },
          ]),
        },
        zlevel: 10, // 设置柱子层级
        barWidth: '10%',
        label: {
          show: true,
          offset: [0, 10],
          position: 'top',
          formatter: '{bg|}',
          rich: {
            bg: {
              backgroundColor: '#fff',
              height: 8,
              width: 20,
            },
            text: {
              color: '#fff',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'bottom',
              padding: [0, 0, -10, 5],
            },
          },
        },
      },
      {
        name: '环比',
        type: 'line',
        data: data.lineData,
        smooth: true,
        itemStyle: {
          color: '#ffd700',
        },
        lineStyle: {
          width: 2,
        },
        // symbolSize: 10
        // tooltip: {
        //   show: false,
        // },
      },
      {
        name: '背景色',
        type: 'bar',
        data: bgData,
        barWidth: '20%',
        barGap: '-150%',
        itemStyle: {
          color: 'rgba(255, 255, 255, .1)',
        },
      },
    ],
  }
  mChart.setOption(option)
}
watch(
  () => props.data,
  () => {
    renderChart()
  },
)
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
